<template>
  <div>
    <!-- <div class="toptitle">账号列表</div> -->
    <el-form
      :inline="true"
      :model="formInline"
      class="demo-form-inline"
      label-width="140px"
    >
      <!-- <el-row :span="24">
                <el-col :span="8"> -->
      <el-form-item label="账号/姓名/邮箱" style="margin-left:-50px;">
        <br />
        <br />
        <el-input
          v-model="formInline.userName"
          size="mini"
          @keyup.enter.native="search"
          style="margin-left:-100px;width:200px"
          placeholder="请输入账号/姓名/邮箱"
          clearable
        ></el-input>
      </el-form-item>
      <!-- </el-col>
                <el-col :span="8"> -->
      <el-form-item label="电话" style="margin-left:-80px;">
        <br />
        <br />
        <el-input
          v-model="formInline.tel"
          size="mini"
          style="margin-left:-60px;width:200px"
          @keyup.enter.native="search"
          placeholder="请输入电话"
          clearable
        ></el-input>
      </el-form-item>
      <!-- </el-col>
                <el-col :span="8"> -->
      <el-form-item label="组织" style="margin-left:-80px;">
        <br />
        <br />
        <el-input
          v-model="formInline.orgSeqName"
          size="mini"
          style="margin-left:-60px;width:200px"
          @keyup.enter.native="search"
          placeholder="请输入组织"
          clearable
        ></el-input>
      </el-form-item>
      <!-- </el-col>
            </el-row>
            <el-row :span="24">
                <el-col :span="8"> -->
      <el-form-item label="账号类型" style="margin-left:-60px;">
        <br />
        <br />
        <el-select
          v-model="formInline.userType"
          size="mini"
          clearable
          @keyup.enter.native="search"
          style="margin-left:-80px;width:200px"
        >
          <el-option label="全部" value></el-option>
          <el-option label="总部" value="1"></el-option>
          <el-option label="大区" value="2"></el-option>
          <el-option label="店主" value="4"></el-option>
          <el-option label="店长" value="5"></el-option>
          <el-option label="门店业务员" value="6"></el-option>
          <el-option label="营销区域业务经理" value="3"></el-option>
        </el-select>
      </el-form-item>
      <!-- </el-col>
                <el-col :span="8"> -->

      <el-form-item style="margin-left:950px;text-align:right;margin-top:20px">
        <el-button
          type="primary"
          size="mini"
          icon="el-icon-search"
          @click="search()"
          >查询</el-button
        >
        <el-button
          type="primary"
          @click="kong()"
          size="mini"
          icon="el-icon-delete"
          >清空</el-button
        >
        <el-button
          type="primary"
          @click="onSubmit()"
          size="mini"
          icon="el-icon-edit"
          >新增总部账号</el-button
        >
      </el-form-item>
      <!-- </el-col>
                <el-col :span="8"></el-col>
            </el-row> -->
    </el-form>
    <el-table
      :data="tableData"
      border
      v-loading="loading"
      height="400px"
      style="font-size: 10px;width:100%;height:500px"
      :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
    >
      <el-table-column
        type="index"
        label="序号"
        align="center"
        width="60"
      ></el-table-column>
      <!-- <el-table-column prop="accounts" label="账号" width="130"></el-table-column> -->
      <el-table-column
        prop="userName"
        label="账号"
        width="130"
        header-align="center"
      ></el-table-column>
      <el-table-column
        prop="roleList[0].userType"
        label="账号类型"
        width="180"
        header-align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.userType == 1">总部</span>
          <span v-if="scope.row.userType == 2">大区</span>
          <span v-if="scope.row.userType == 3">营销区域业务经理</span>
          <span v-if="scope.row.userType == 4">店主</span>
          <span v-if="scope.row.userType == 5">店长</span>
          <span v-if="scope.row.userType == 6">门店业务员</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="roleList[0].roleName"
        label="所属角色"
        width="180"
        header-align="center"
      ></el-table-column>

      <el-table-column
        prop="orgList[0].orgName"
        label="所属组织"
        width="180"
        header-align="center"
      >
        <template slot-scope="{ row }">
          <div>
            <p v-for="(orgName, index) in row.orgList" :key="index">
              {{ orgName.orgName }}
            </p>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="realName"
        label="姓名"
        width="130"
        header-align="center"
      ></el-table-column>
      <!-- <el-table-column
        prop="email"
        label="邮箱"
        width="180"
        header-align="center"
      ></el-table-column> -->
      <el-table-column
        prop="tel"
        label="电话"
        width="120"
        header-align="center"
      ></el-table-column>

      <el-table-column prop="date" label="状态" align="center">
        <template slot-scope="scope">{{
          scope.row.status === 0 ? '禁用' : '启用'
        }}</template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180"
        header-align="center"
      ></el-table-column>
      <el-table-column
        prop="createUser"
        label="创建人"
        width="180"
        header-align="center"
      ></el-table-column>
      <el-table-column label="操作" width="280" align="center" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" @click="getrole(scope.row)" type="text"
            >分配角色</el-button
          >
          <el-button size="mini" @click="edit(scope.row)" type="text"
            >编辑</el-button
          >
          <el-button
            size="mini"
            @click="handleClick(scope.row)"
            v-if="scope.row.status === 0"
            type="text"
            >启用</el-button
          >
          <el-button
            size="mini"
            @click="handleClick(scope.row)"
            v-if="scope.row.status === 1"
            type="text"
            >禁用</el-button
          >
          <el-button size="mini" @click="reset(scope.row)" type="primary">重置密码</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :visible.sync="dialogVisible" width="50%" title="分配角色">
      <el-checkbox-group
        v-for="(item, index) in this.rolearr"
        :key="index"
        v-model="checkList"
        @change="handleCheckedCitiesChange"
      >
        <el-checkbox
          :label="item.roleName"
          style="margin-left:25%;margin-bottom:5px;"
          @change="changebox(item.roleId)"
        ></el-checkbox>
      </el-checkbox-group>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="surefenrole()" size="small"
          >确 定分配角色</el-button
        >
      </span>
    </el-dialog>

    <div class="block" style="margin-top:2px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[10, 20, 30, 50, 100]"
        :current-page="listQuery.current"
        :page-size="listQuery.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  accountlist,
  usebuttonone,
  resetpass,
  getfenrole,
} from '@/api/platformmanage';
import { resetPassword } from "@/api/loginApi";
import { rolemanage } from '@/api/platformmanage';
import qs from 'qs';
export default {
  data() {
    return {
      loading: true,
      formInline: {
        userName: '',
        region: '',
        userType: '',
        tel: '',
        orgSeqName: '',
      },
      total: 0,
      userId: '',
      rolearr: [],
      roleReqs: [],
      dialogVisible: false,
      checkList: [],
      listQuery: {
        current: 1,
        size: 10,
      },
      tableData: [],
    };
  },
  mounted() {
    this.accountlist();
  },
  methods: {
    reset(v) {
      let data = { authId: v.userName, password: '888888' };
      resetPassword(qs.stringify(data)).then((res) => {
        this.$message({
          showClose: true,
          message: '密码重置成功',
          type: 'success',
        });
      });
    },
    getrolemanage(v) {
      this.rolearr = [];
      //   this.rolearr = v.roleList;
      rolemanage().then((res) => {
        res.records.forEach((item, i) => {
          let data1 = {
            roleName: item.roleName,
            roleId: item.roleId,
          };
          this.rolearr.push(data1);
          console.log(this.rolearr, 'ppuu');
        });
      });
      console.log(this.rolearr, 'iii');
    },
    changebox(v) {
      console.log(this.roleReqs, 'hh');
      if (this.roleReqs.indexOf(v) === -1) {
        this.roleReqs.push(v);
      } else {
        this.roleReqs.splice(this.roleReqs.indexOf(v), 1);
      }
      console.log(this.roleReqs, 'hhrrr');
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.listQuery.size = val;
      this.accountlist();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.listQuery.current = val;
      this.accountlist();
    },
    // indexMethod(index) {
    //   let curpage = this.listQuery.current; //单前页码，具体看组件取值
    //   let limitpage = this.listQuery.size; //每页条数，具体是组件取值
    //   return index + 1 + (curpage - 1) * limitpage;
    // },

    handleClick(v) {
      if (v.status === 0) {
        var uuid = 1;
      } else if (v.status === 1) {
        var uuid = 0;
      }
      let data = { userId: v.userId, status: uuid, tel: v.tel };
      usebuttonone(data).then((res) => {
        this.accountlist();
        this.$message({
          showClose: true,
          message: res.message,
          type: 'success',
        });
      });
    },
    handleCheckedCitiesChange(v) {
      console.log(v, 'oioi');
    },
    surefenrole() {
      let data = {
        userId: this.userId,
        roleReqs: this.roleReqs,
      };
      getfenrole(data).then((res) => {
        this.$message({
          showClose: true,
          message: res.message,
          type: 'success',
        });
        this.dialogVisible = false;
        this.accountlist();
      });
    },
    search() {
      let data = {
        size: this.listQuery.size,
        current: 1,
        condition: {
          userName: this.formInline.userName,
          userType: this.formInline.userType,
          tel: this.formInline.tel,
          orgSeqName: this.formInline.orgSeqName,
        },
        ascs: ['user_type'],
        descs: [],
      };
      accountlist(data).then((res) => {
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    onSubmit() {
      //   this.$router.push("adminSet");
      this.$router.push({
        name: 'adminSet',
        params: {
          flag3: true,
          flagmi: true,
        },
      });
    },
    edit(v) {
      console.log(v, 'pp');
      //this.$router.push("adminSet");
      this.$router.push({
        name: 'adminSet',
        params: {
          edit: v,
          flag3: true,
          flagmi: false,
        },
      });
    },
    kong() {
      this.formInline.userName = '';
      this.formInline.tel = '';
      this.formInline.orgSeqName = '';
      this.formInline.userType = '';
    },
    getrole(v) {
      this.dialogVisible = true;
      this.checkList = [];
      this.roleReqs = [];
      console.log(v, 'oooo');
      if (v.roleList == null) {
        console.log('1');
        this.userId = v.userId;
        this.getrolemanage();
      } else {
        console.log('2');
        v.roleList.forEach((item) => {
          this.checkList.push(item.roleName);
          this.roleReqs.push(item.roleId);

          console.log(this.checkList, this.roleReqs, 'ppuu');
        });
        this.rolearr = v.roleList;
        this.userId = v.userId;

        this.getrolemanage();
      }
    },
    accountlist() {
      let data = {
        size: this.listQuery.size,
        current: this.listQuery.current,
        condition: {
          userName: this.formInline.userName,
          userType: this.formInline.userType,
        },
        ascs: ['user_type'],
        descs: [],
      };
      accountlist(data).then((res) => {
        this.loading = false;
        this.tableData = res.records;
        this.total = res.total;
      });
    },
  },
  beforeRouteLeave(to, from, next) {
    // 设置下一个路由的 meta
    to.meta.keepAlive = false; // C 跳转到 A 时让 A 不缓存，即刷新
    next();
  },
};
</script>
<style lang="less" scoped>
.toptitle {
  border: 1px solid #e0e0e0;
  border-bottom: 2px solid #188097;
  background: #f5f5f5;
  line-height: 35px;
  margin-bottom: 10px;
  padding: 0 10px;
  font-size: 14px;
  font-weight: bold;
}
.el-input--small .el-input__inner {
  height: 32px;
  line-height: 32px;
}
.demo-form-inline {
  //   border: 1px solid #ebeef5;
  padding: 20px 10px 0px 30px;
}
.el-form-item {
  margin-bottom: 0px;
}
.el-row {
  margin-bottom: 0px !important;
}
/deep/.el-dialog__body {
  display: flex;
  flex-wrap: wrap;
}
/deep/.el-checkbox-group {
  margin: 20px;
}
</style>
